<template>
	<view class="container"
		style="background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHArpk4X4ghNllkcic3b1DKG6w25zmDytGtsMKabMCRWibOD5bjtYPEYwg/640?wx_fmt=jpeg&amp;from=appmsg');background-size: 100% 100%;">
		<backbtn />
		<uni-transition mode-class='slide-left' :show="scene === 0">
			<div class="center" style="height: 100vh;width: 100vw;">
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHUFr8zFeeTSCKUxu3rL3wPCjruyPiazdBYfklS7e0aqxLj6zIDQco77g/640?wx_fmt=png&amp;from=appmsg"
					class="train animated infinite fadeInLeft"
					style="animation-duration: 6s;width: 60vw;height: 60vh!important;margin-top: 0!important;" />
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHbD8D4KSCibCUUTzeaZnpA5PQ9hbdyEynbntLUiaUfOnRv3dhXPhRdDvg/640?wx_fmt=png&amp;from=appmsg"
					class="lipao animated infinite flash" style="animation-duration: 6s;height: 60vh" />

				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHbD8D4KSCibCUUTzeaZnpA5PQ9hbdyEynbntLUiaUfOnRv3dhXPhRdDvg/640?wx_fmt=png&amp;from=appmsg"
					class="flower animated infinite" style="animation-duration: 6s;height: 60vh!important;" />
			</div>
		</uni-transition>
		<div class="center" style="height: 70vh;">
			<music :music="musicSrc" />
			<z-swiper v-model="list" :options="optionsAutoplay">
				<z-swiper-item :custom-style="{width:'80vw'}" v-for="(item,index) in list" :key="index">
					<img :src="item" alt="" mode="widthFix" @click="previewImage(item)">
				</z-swiper-item>
			</z-swiper>
		</div>
		<div class="foreground" :style="{backgroundImage:'url('+foreground+')'}">

			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHbD8D4KSCibCUUTzeaZnpA5PQ9hbdyEynbntLUiaUfOnRv3dhXPhRdDvg/640?wx_fmt=png&amp;from=appmsg"
				class="train animated infinite tada"
				style="animation-duration: 6s;width: 60vw;height: 60vh!important;margin-top: 0!important;opacity: 0.5;" />

		</div>
		<footerPart :detail='detail' />
	</view>
</template>
<script>
	import temp from './temp.json'
	import backbtn from '@/components/backbtn.vue'
	import music from '@/components/music.vue'
	import footerPart from '@/components/footer.vue'
	const type = 'moon1'
	const title = '月是故乡明'
	const cover = 'https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyDD0Siag2jtibI6oXs4ic9EDmHE0FmDicJMZWCDyUgxshHY2fres9ROQpW3I1kOxDtPStjmMoicSTIRmGw/640?wx_fmt=jpeg&amp;from=appmsg'
	export default {
		name: 'moon1',
		components: {
			backbtn,
			music,
			footerPart
		},
		data() {
			return {
				show: false,
				detail: {},
				index: 0,
				scene: 0, //0 is default 1 is show picture
				backthumb: '',
				foreground: '',
				isplaying: true,
				// musicSrc: 'https://res.wx.qq.com/voice/getvoice?mediaid=MzI1OTc4MjU2OF8xMDAwMDUwODM=',
				musicSrc: 'https://res.wx.qq.com/voice/getvoice?mediaid=Mzg5OTg3NzY3NV8xMDAwMDAwOTg=',
				optionsAutoplay: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					speed: 1000,
					coverflowEffect: {
						rotate: 50,
						stretch: 20,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
					autoplay: true
				},
				list: [
					'http://mmbiz.qpic.cn/sz_mmbiz_jpg/WXQibJTp7BTBcSo08tsctVNgOTlhI2JPehBy95WUY9luTdIyYwA0HV2kWlRNHBvfDw4apn0ibAGVUIPzDhjSbk0Q/0?wx_fmt=jpeg'
				],
				ano: '',
				options: {},
				detail: {},
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			this.getalbum(options);
			this.options = options;
			setTimeout(() => {
				that.scene = 1;
			}, 6000);
		},
		methods: {
			getalbum(options) {
				const that = this;
				const data = {
					'templateid': options.templateid,
					'appid': this.$apis.appId,
					'showano': options.showano, //
					'ano': options.ano
				};
				this.$apis.getalbum(data).then(res => {
					that.list = res.ablums;
					that.detail = res;
					that.detail.type = type;
					wx.hideLoading();
				})
			},
			previewImage(url) {
				// 使用uni的预览图片接口
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [url], // 需要预览的图片http链接列表
				});
			},
		},
		onShareAppMessage: function() {
			const sharepath =
				'/pages/album/' + type +
				'?templateid=' + this.detail.templateid +
				'&showano=' + this.options.showano +
				'&ano=' + this.detail.ano + '&type=' + type;
			console.log('sharepath', sharepath);
			return {
				title: title,
				path: sharepath,
				imageUrl: cover,
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/animate.min.css";
	@import "album.scss"
</style>